<!--
* title:民生专题
* author:LDM
* date:2018/08/15
-->
<template>
  <div class="lht-wrap">
    <!--头部-->
    <div class="lht-header">
      <wb-Header :title="'自在武夷融合平台'"></wb-Header>
    </div>
    <!--内容-starting-->
    <div class="lht-main">
      <!--内容快左边-starting-->
      <div class="lhtm-left">
        <div class="register-wrap">
          <!--注册用户-starting-->
          <div class="register-user-wrap">

            <!--注册用户总数-starting-->
            <div class="ru-left">
              <div class="rul-wrap">
                <!--边框-starting-->
                <div class="border-bg">
                  <div class="border-main">
                    <!--角落四处的补丁-->
                    <i class="tab tab-top-left"></i>
                    <i class="tab tab-top-right"></i>
                    <i class="tab tab-bottom-left"></i>
                    <i class="tab tab-bottom-right"></i>
                  </div>
                </div>
                <!--边框-ending-->
                <!--todo:内容-->
                <div class="rul-con">
                  <wb-tab class="width-100" :value="'注册用户总数'"></wb-tab>
                  <div class="item-wrap">
                    <div class="item"
                         v-for="(item,index) in registerUserTotal"
                         :class="[index<4?' yellow-text':' white-text']"
                         v-text="item"></div>
                  </div>
                </div>

              </div>
            </div>
            <!--注册用户总数-ending-->
            <!--注册用户增长趋势-starting-->
            <div class="ru-right">
              <!--边框-starting-->
              <div class="border-bg">
                <div class="border-main">
                  <!--角落四处的补丁-->
                  <i class="tab tab-top-left"></i>
                  <i class="tab tab-top-right"></i>
                  <i class="tab tab-bottom-left"></i>
                  <i class="tab tab-bottom-right"></i>
                </div>
              </div>
              <!--边框-ending-->
              <!--todo:内容-->
              <div class="rur-con">
                <div class="rur-header">
                  <wb-tab class="width-60" :value="'注册用户增长趋势'"></wb-tab>
                  <div class="rur-data">
                    <el-date-picker
                      class="rang-date"
                      v-model="registerDateRang.value"
                      type="daterange"
                      size="mini"
                      range-separator="~"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      popper-class="drop-date"
                      format="yyyy~MM~dd"
                      value-format="timestamp"
                      unlink-panels
                      :picker-options="registerDateRang.changeRurDateFunc">
                    </el-date-picker>
                  </div>
                </div>
                <div class="rur-main">
                  <line-bar-echarts v-if="lineBarEchatData" :params="lineBarEchatData"></line-bar-echarts>
                </div>
              </div>
            </div>
            <!--注册用户增长趋势-ending-->
          </div>
          <!--注册用户-ending-->
          <!--访客增长趋势-starting-->
          <div class="visitor-echarts-wrap">
            <!--边框-starting-->
            <div class="border-bg">
              <div class="border-main">
                <!--角落四处的补丁-->
                <i class="tab tab-top-left"></i>
                <i class="tab tab-top-right"></i>
                <i class="tab tab-bottom-left"></i>
                <i class="tab tab-bottom-right"></i>
              </div>
            </div>
            <!--边框-ending-->
            <!--todo:内容-->
            <div class="re-con">
              <div class="re-header">
                <wb-tab class="width-33" :value="'访客增长趋势'"></wb-tab>
                <div class="re-data">
                  <div class="zw"></div>
                  <el-date-picker
                    class="rang-date"
                    v-model="visitorDateRang.value"
                    type="daterange"
                    size="mini"
                    range-separator="~"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    popper-class="drop-date"
                    format="yyyy~MM~dd"
                    value-format="timestamp"
                    unlink-panels
                    clearable
                    :picker-options="visitorDateRang.changeRurDateFunc">
                  </el-date-picker>
                </div>
              </div>
              <div class="re-main">
                <div class="re-item" v-for="item in barData">
                  <div class="re-item-con">
                    <bar-echarts :params="item" v-if="barData.length !=0"></bar-echarts>
                  </div>
                </div>
              </div>

            </div>
          </div>
          <!--访客增长趋势-ending-->
        </div>

      </div>
      <!--内容快左边-ending-->
      <!--内容快右边-->
      <div class="lhtm-right">
        <!--边框-starting-->
        <div class="border-bg">
          <div class="border-main">
            <!--角落四处的补丁-->
            <i class="tab tab-top-left"></i>
            <i class="tab tab-top-right"></i>
            <i class="tab tab-bottom-left"></i>
            <i class="tab tab-bottom-right"></i>
          </div>
        </div>
        <!--边框-ending-->
        <!--todo:内容-->
        <div class="lhtmr-com">
          <div class="lhtmr-header">
            <wb-tab class="width-50" :value="'各端访客信息'"></wb-tab>
            <div class="lhtmr-date">
              <el-date-picker
                class="rang-date"
                v-model="pieDateRang.value"
                type="daterange"
                size="mini"
                range-separator="~"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                popper-class="drop-date"
                format="yyyy~MM~dd"
                value-format="timestamp"
                unlink-panels
                :picker-options="pieDateRang.changeRurDateFunc">
              </el-date-picker>
            </div>
          </div>
          <div class="lhtmr-main">
            <div class="lhtmr-item" v-for="item in pieData" >
              <div class="lhtmr-item-title">
                <span class="lhtmr-item-name" v-text="item.title"></span>
              </div>
              <div class="lhtmr-item-con">
                <pie-echarts  v-if="pieData.length !=0" :params="item"></pie-echarts>
              </div>
              <i class="lhtmr-item-divide"></i>
              <i class="lhtmr-item-divide-logo lhtmr-item-divide-logo-left"></i>
              <i class="lhtmr-item-divide-logo lhtmr-item-divide-logo-right"></i>
            </div>
          </div>
        </div>
      </div>
      <!--内容快右边-ending-->

    </div>
    <!--内容-ending-->
  </div>
</template>
<script src="./livelihoodTheme.js"></script>
<style lang="scss">
  @import "../mixin.scss";
  @import "./livelihoodTheme.scss";
</style>
